<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>话伴网页版-个人通讯录</title>
<link href="css/reset.css" type="text/css" rel="stylesheet" />
<link href="css/global.css" type="text/css" rel="stylesheet" />
<link href="css/commom.css" type="text/css" rel="stylesheet" />
<link href="css/business-layout.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/popupdiv.js" type="text/javascript"></script>
<script src="js/commom.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
  <div id="header"> <span class="h-l"></span><span class="h-l h-r"></span>
    <div class="logo"><a href="http://web.33e9.com" title="返回首页"><img src="images/logo.gif" alt="返回首页"/></a></div>
    <!-- End .logo -->
    <em></em>
    <!-- 打开菜单只需添加“menu-hover”样式如：<dl class="menu menu-hover">  -->
    <dl class="menu">
      <dt class="menu-top"><span class="triangle box_r"></span>我的身份</dt>
      <dd class="menu-bottom">
        <div class="menu-preson"><a href="#">个人</a></div>
        <div class="menu-busine">我加入的组织：</div>
        <ul>
          <li><a href="#">飞告传媒</a></li>
          <li><a href="#">大众通信技术</a></li>
        </ul>
        <!-- End .menu-busine -->
      </dd>
    </dl>
    <!-- End .menu -->
    <!-- 打开菜单只需添加“menu-hover”样式如：<dl class="menu menu-hover menu-msg">  -->
    <dl class="menu menu-msg">
      <dt class="menu-top new-msg">新短信(10)</dt>
      <dd class="menu-bottom">
        <ul>
          <li><a href="#">Classyuan(5)</a></li>
          <li><a href="#">张三(5)</a></li>
        </ul>
        <!-- End .menu-busine -->
      </dd>
    </dl>
    <!-- End .menu -->
    <div class="login-info"> 欢迎您，<a href="#" target="_blank">ClassYuan</a> <a href="#" target="_blank">[退出]</a> <a href="#" target="_blank">我的话伴</a> | <a href="#" target="_blank">我要充值</a> | <a href="#" target="_blank">话伴官网</a> </div>
    <!-- End .login-info -->
  </div>
  <!-- End #header -->
  <div id="container" class="clearfix"> <b class="round r-t"></b> <b class="round r-r"></b>
    <div class="col1 box_l">
      <div class="user clearfix">
        <div class="user-info">
          <!--
                        企业男：b_male_48x48.gif
                        企业女：b_female_48x48.gif
                        个人男：u_male_48x48.gif
                        个人女：u_female_48x48
                        保　密：user48x48.gif
                        -->
          <img src="images/user48x48.gif" alt="ClassYuan" class="box_l"/> <b>当前身份：</b> <span title="三三得玖电子商务三三得玖电子商务">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span> </div>
        <!-- End .user-info -->
        <div class="user-phone"> 
         <!-- 点击返回状态后的效果：
                            <a href="#" class="blue box_r">修改</a>15959451214
                            -->
          <!-- 点击修改状态后的效果（点击任地方恢复之前状态）：-->
          <dl class="droplist">
            	<dt><em class="triangle"></em>0755-26744444</dt>
                <dd class="hide">
                	<a href="javascript:void(0);" value="0755-26744444">0755-26744444</a>
                	<a href="javascript:void(0);" value="15959451214">15959451214</a>
                    <a href="javascript:void(0);" value="buy"><img src="images/add.png" class="box_l"/>添加接听话机</a>
                </dd>
            </dl>
                            
        </div>
        <!-- End .user-phone -->
        <div class="user-phone user-tel clearfix">
          
                            <a href="#" class="blue box_r">修改</a>15959451214
                           
          <!-- 鼠标点击任地方恢复之前状态 
                            	修改接听话机按钮
                           
          <dl class="droplist">
            	<dt><em class="triangle"></em><span></span></dt>
                <dd class="hide">
                	<a href="javascript:void(0);" value="0755-26744444">0755-26744444</a>
                	<a href="javascript:void(0);" value="15959451214">15959451214</a>
                	<a href="javascript:void(0);" value="隐藏号码">隐藏号码</a>
                    <a href="javascript:void(0);" value="购买号码"><img src="images/cart.png" class="box_l"/>购买号码</a>
                </dd>
            </dl>
           -->
        </div>
        <!-- End .user-phone -->
        <!-- 切换接听话机效果
                        <div class="user-loading text-center">
                            <img src="images/loading.gif" alt=""/>
                        </div>
                        -->
      </div>
      <!-- End .user -->
      <dl class="nav">
        <dt class="open"><a href="javascript:void(0);">个人通讯录</a></dt>
        <dd>
          <ul class="personal-list">
            <!-- 当前状态：增加“current”样式 例如： <li class="current"> -->
            <li class="current"><a href="personal.html">全部(118)</a></li>
            <li><a href="personal.html">我的好友(60)</a></li>                             
            <li> <a href="personal.html">公司同事(50)</a>
            <span class="personal-tool hide"><a href="javascript:void(0);" class="tool-edit" title="编辑分组"></a><a href="javascript:void(0);" class="tool-del" title="删除分组"></a></span>
            </li>
            <li><a href="personal.html">陌生人(8)</a></li>
            
            <!--
            	点击新建分组显示下面的html，删除hide样式即可
               新建分组：
           -->
            <li class="hide reveal"><input value="" maxlength="30" class="tool-txt"/><span class="personal-tool"><a href="javascript:void(0);" class="tool-add" title="新建分组"></a><a href="javascript:void(0);" class="tool-hide" title="取消"></a></span></li>          
            <li class="last tool-addbtn"><a href="javascript:void(0);">新建分组</a></li>
          </ul>
          <!-- End .a -->
        </dd>
        <!-- 当前状态：增加“current”样式 例如： <dt class="current"> -->
        <dt class="close"><a href="javascript:void(0);">组织通讯录</a></dt>
        <dd class="hide">
          <ul>
            <!-- 当前状态：增加“current”样式 例如： <li class="current"> -->
            <li class="current"><a href="business.html">飞告传媒</a></li>
            <li><a href="business.html">大众通信技术</a></li>
            <li><a href="business.html">三三得玖电子商务</a></li>
            <li><a href="business.html">三三得玖通信技术</a></li>
          </ul>
          <!-- End .a -->
        </dd>
        <dt><a href="recentcontacts.html">最近联系人</a></dt>
        <dt><a href="call.html">拨打电话</a></dt>
        <dt><a href="sendmsg.html">发送短信</a></dt>
      </dl>
      <!-- End .nav -->
    </div>
    <!-- End .col1 -->
    <div class="col2 box_r">
      <div class="top">
        <div class="top-title">
          <h1 class="box_l"><span class="toolbtn-add" onclick="openAddBook();"></span><span class="toolbtn-del" onclick="openDelMsgError();"></span>
          	<dl class="toolbtn-move droplist">
            	<dt><span></span></dt>
                <!-- 打开菜单删除hide样式即可 -->
                <dd class="hide moveuser">
                	<a href="javascript:void(0);" value="0">我的好友</a>
                	<a href="javascript:void(0);" value="1">公司同事</a>
                	<a href="javascript:void(0);" value="2">高中同学</a>
                	<a href="javascript:void(0);" value="-1">陌生人</a>
                </dd>
            </dl>
           
          </h1>
          <div class="search box_r">
            <form action="#">
              <!-- 输入框处于焦点状态文字清除，当焦点离开如果素如框为空恢复“搜索联系人” -->
              <input type="text" class="search-text" value="输入姓名、电话号码"/>
              <input type="submit" class="search-btn" value="搜索"/>
            </form>
          </div>
          <!-- End .search -->
        </div>
        <!-- End .search -->
        <div class="top-index clearfix">
          <div class="box_l">
            <!-- 选中状态样式  current -->
            <a href="#" class="current">全部</a> <a href="#">#</a> <a href="#">A</a> <a href="#">B</a> <a href="#">C</a> <a href="#">D</a> <a href="#">E</a> <a href="#">F</a> <a href="#">G</a> <a href="#">H</a> <a href="#">I</a> <a href="#">J</a> <a href="#">K</a> <a href="#">L</a> <a href="#">M</a> <a href="#">N</a> <a href="#">O</a> <a href="#">P</a> <a href="#">Q</a> <a href="#">R</a> <a href="#">S</a> <a href="#">T</a> <a href="#">U</a> <a href="#">V</a> <a href="#">W</a> <a href="#">X</a> <a href="#">Y</a> <a href="#">Z</a> </div>
          <!-- End .index -->
          <div class="box_r">显示方式：<a href="#">列表</a> | <a href="#">名片秀</a></div>
          <!-- End .box_r -->
        </div>
        <!-- End .top-index -->
      </div>
      <!-- End .top -->
      <table class="grid linkman">
        <thead>
          <tr>
            <th width="0" class="noboder"></th>
            <th width="5%"><input type="checkbox"/></th>
            <th width="20%" class="title-name">姓　名　　　</th>
            <th width="25%" class="text-left">手　机</th>
            <th width="25%" class="text-left">家庭电话</th>
            <th width="30%" class="text-left">电子邮箱</th>
            <th width="0" class="noboder"></th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="6" class="page"><span class="page-total box_l text-left"><input type="checkbox" id="all-bottom"/><label for="all-bottom">全选</label>　共计：160条记录</span>
              <div class="page-list box_r text-right"> <a href="javascript:void(0);" title="首页">&lt;&lt;</a> <a href="javascript:void(0);" title="上一页">&lt;</a> <span class="current">1</span> <a href="javascript:void(0);">2</a> <a href="javascript:void(0);">3</a><span class="diabled">...</span><a href="#" title="下一页">&gt;</a> <a href="javascript:void(0);" title="尾页">&gt;&gt;</a> 共 20 页  跳转至
                <select>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                页 </div>
              <!-- End .page-list --></td>
          </tr>
        </tfoot>
        <tbody>
          <!--
                        点击整行进入详细资料页面 owner.html
                        -->
          <tr>
            <td class="noboder"></td>
            <td width="5%"><input type="checkbox"/></td>
            <!-- 
                                头像样式
                                男：grid-male
                                女：grid-male
                                未知：grid-user
                                -->
            <td><span class="gicon grid-male">&nbsp;</span><a href="owner.html" target="_blank" class="blue">ClassYuan</a></td>
            <td>15984848484</td>
            <td>0755-25412145</td>
            <td><a href="mailto:classyuan@gmail.com">classyuan@gmail.com</a></td>
            <td class="noboder"></td>
          </tr>
          <tr class="hover">
            <td class="noboder"></td>
            <td width="5%"><input type="checkbox"/></td>
            <td><span class="gicon grid-female">&nbsp;</span><a href="owner.html" target="_blank" class="blue">ClassYuan</a></td>
            <td>15984848484</td>
            <td>0755-25412145</td>
            <td><a href="mailto:classyuan@gmail.com">classyuan@gmail.com</a></td>
            <td class="noboder"></td>
          </tr>
          <tr>
            <td class="noboder"></td>
            <td width="5%"><input type="checkbox"/></td>
            <td><span class="gicon grid-user">&nbsp;</span><a href="owner.html" target="_blank" class="blue">ClassYuan</a></td>
            <td>15984848484</td>
            <td>0755-25412145</td>
            <td><a href="mailto:classyuan@gmail.com">classyuan@gmail.com</a></td>
            <td class="noboder"></td>
          </tr>
          <tr>
            <td class="noboder"></td>
            <td width="5%"><input type="checkbox"/></td>
            <td><span class="gicon grid-female">&nbsp;</span><a href="owner.html" target="_blank" class="blue">ClassYuan</a></td>
            <td>15984848484</td>
            <td>0755-25412145</td>
            <td><a href="mailto:classyuan@gmail.com">classyuan@gmail.com</a></td>
            <td class="noboder"></td>
          </tr>
          <!--数据加载状态：
                            <tr>
                                <td colspan="4" valign="center" class="grid-empty text-center"> <img src="images/loading.gif" alt=""/><br/>数据加载中</td>
                            </tr>
                            -->
          <!--没有数据状态：
                            <tr>
                                <td colspan="4" valign="center" class="grid-empty text-center">暂无通讯录</td>
                            </tr>
                            -->
        </tbody>
      </table>
      <!-- 名片秀
                    图片：
                        企业男：b_male_48x48.gif
                        企业女：b_female_48x48.gif
                        个人男：u_male_48x48.gif
                        个人女：u_female_48x48
                        保　密：user48x48.gif
                        
                        鼠标经过样式：增加 hover
                        鼠标离开则删除 hover
                        
                         -->
                         <div class="card-show clearfix">
                    <ul class="clearfix">
                        <li>
                            <div class="shade">
                            <input type="checkbox" class="card-check"/>
                                <img src="images/b_female_48x48.gif" class="box_l" alt=""/>
                                <p title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" class="ellipsis">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
                                <p>15989454125</p>
                                <p>0755-25412458</p>
                            </div>
                        </li>
                    </ul>
                    <div class="page"><span class="page-total box_l text-left"><input type="checkbox" id="all-bottom"/><label for="all-bottom">全选</label>　共计：160条记录</span>
              <div class="page-list box_r text-right"> <a href="javascript:void(0);" title="首页">&lt;&lt;</a> <a href="javascript:void(0);" title="上一页">&lt;</a> <span class="current">1</span> <a href="javascript:void(0);">2</a> <a href="javascript:void(0);">3</a><span class="diabled">...</span><a href="#" title="下一页">&gt;</a> <a href="javascript:void(0);" title="尾页">&gt;&gt;</a> 共 20 页  跳转至
                <select>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                页 </div>
              <!-- End .page-list --></div>
                    
                    </div>
                    
      <!-- End .card-show -->
      <div class="top">
        <div class="top-title">
          <h1 class="box_l"><span class="toolbtn-add" onclick="openAddBook();"></span><span class="toolbtn-del" onclick="openDelMsgError();"></span>
          	<dl class="toolbtn-move droplist">
            	<dt><span></span></dt>
                <!-- 打开菜单删除hide样式即可 -->
                <dd class="hide moveuser">
                	<a href="javascript:void(0);" value="0">我的好友</a>
                	<a href="javascript:void(0);" value="1">公司同事</a>
                	<a href="javascript:void(0);" value="2">高中同学</a>
                	<a href="javascript:void(0);" value="-1">陌生人</a>
                </dd>
            </dl>
            </dl>
          </h1>
        </div>
      </div>
    </div>
    <!-- End .col2 -->
    <div class="clear col-bottom"> <b class="round r-l"></b> <b class="round r-b"></b> </div>
    <!-- End .col-bottom -->
  </div>
  <!-- End #container -->
  <div id="footer" class="text-center"> &copy; 2011 深圳市三三得玖电子商务有限公司　　 客服热线： <span onclick="openCallKeFuMsg()" title="点击拨打客服电话">4007168339</span> </div>
  <!-- End #footer -->
</div>
<!-- End #wrap -->





<!--  移动分组提示 -->
<div class="hide" id="movemsg" poptitle="提示">
	<div class="pop-addphone3" ><img src="images/pop-msgok.gif" class="box_l icon-msgok"/>已成功的将选中的联系人移动到“<span id="movemsg-txt">---</span>”分组。</div>
	<div class="pop-bottom"><input type="submit" value="关闭" onclick="closePanel('#movemsg');" class="pop-closebtn box_r"/></div>

</div>

<!--  移动分组失败提示 -->
<div class="hide" id="movemsgerror" poptitle="提示">
	<div class="pop-addphone3" ><img src="images/pop-msgerror.gif" class="box_l icon-msgok"/>请选择要移动的联系人！</div>
	<div class="pop-bottom"><input type="submit" value="关闭" onclick="closePanel('#movemsgerror');" class="pop-closebtn box_r"/></div>

</div>


<!-- 删除分组提示 -->
<div class="hide" id="delgroupmsg" poptitle="提示">
	<div class="pop-delmsg" ><img src="images/pop-msgerror.gif" class="box_l icon-msgok"/>分组被删除，该分组内的所有联系人将一起被删除。<br />您确认要删除分组：“<span>公司同事</span>”吗？</div>
	<div class="pop-bottom"><input type="submit" value="取消" onclick="closePanel('#delgroupmsg');" class="pop-closebtn box_r"/><input type="submit" value="确定" class="pop-closebtn box_r"/></div>
</div>




<!-- 删除联系人提示 -->
<div class="hide" id="delmsg" poptitle="提示">
	<div class="pop-delmsg" ><img src="images/pop-msgok.gif" class="box_l icon-msgok"/>共删除“<span>10</span>”个联系人！</div>
	<div class="pop-bottom"><input type="submit" value="确定" class="pop-closebtn box_r" onclick="closePanel('#delmsg');" /></div>
</div>

<!-- 删除联系人提示 -->
<div class="hide" id="delmsgerror" poptitle="提示">
	<div class="pop-delmsg" ><img src="images/pop-msgerror.gif" class="box_l icon-msgok"/>请选择要删除的联系人！</div>
	<div class="pop-bottom"><input type="submit" value="确定" class="pop-closebtn box_r" onclick="closePanel('#delmsgerror');" /></div>
</div>



<div class="hide" id="addbook" poptitle="新增联系人">
    <div class="addbook">
      <div class=" clearfix"> <img class="box_l portrait" alt="ClassYuan" src="images/user64x64.gif">
        <div class="pop-info">
          <p>姓名：
            <input type="text" />
          </p>
          <p>性别：
            <input type="radio" id="male" checked="checked" name="sex" />
            <label for="male">男</label>
            <input type="radio" id="female" name="sex" />
            <label for="female">女</label>
            <input type="radio" id="privary" name="sex" />
            <label for="privary">保密</label>
          </p>
          <p>分组：
            <select>
              <option>我的好友</option>
              <option>亲人</option>
              <option>陌生人</option>
            </select>
          </p>
        </div>
      </div>
      <div class="pop-items">
        <div class="pop-items-title">联系方式</div>
        <p>
          <select>
            <option>手机号码</option>
            <option>办公电话</option>
            <option>家庭电话</option>
            <option>其他电话</option>
          </select>
          <input type="text" class="input-text"//>
          <span class="pop-items-del" title="删除">&times;</span> </p>
        <p class="pop-items-des"><a href="#" class="blue">+添加新号码</a></p>
        <p>
          <select>
            <option>常用邮箱</option>
            <option>其他邮箱</option>
            <option>QQ</option>
            <option>MSN</option>
            <option>Skype</option>
            <option>Fetion</option>
          </select>
          <input type="text" class="input-text"//>
          <span class="pop-items-del" title="删除">&times;</span> </p>
        <p class="pop-items-des"><a href="#" class="blue">+添加新信息</a></p>
      </div>
      <div class="pop-items">
        <div class="pop-items-title">更多详情</div>
        <p>
        <!-- 选择生日需要用时间戳控件 -->
          <select>
            <option value="生日">生日</option>
            <option value="公司名称">公司名称</option>
            <option value="所在部门">所在部门</option>
            <option value="职务名称">职务名称</option>
            <option value="公司地址">公司地址</option>
            <option value="家庭地址" selected="">家庭地址</option>
            <option value="公司邮编">公司邮编</option>
            <option value="家庭邮编">家庭邮编</option>
            <option value="备注">备注</option>
          </select>
          <input type="text" class="input-text"//>
          <span class="pop-items-del" title="删除">&times;</span> </p>
        <p class="pop-items-des"><a href="#" class="blue">+添加新信息</a></p>
      </div>

        <!-- 错误提示信息 -->
        <p class="pop-error">
          姓名不能为空
        </p>
      
      
    </div>
    <!-- End .pop-box -->
    <div class="pop-bottom text-center">
      <input type="submit" value="保存" class="pop-okbtn"/>
    </div>
    <!-- End .pop-bottom -->

</div>





<div class="hide" id="addphone1" poptitle="添加接听话机">
    <div class="pop-setp pop-addphone1">
      <div class="pop-setpbg"></div>
      <p><select>
      	<option>手机号码</option>
      	<option>办公电话</option>
      	<option>家庭电话</option>
      	<option>其他电话</option>
      </select> <input class="addphone1-text" type="text"/></p>
    </div>
    <!-- End .pop-box -->
    <div class="pop-bottom">
      <input type="submit" value="取消" onclick="closePanel('#addphone1')" class="pop-closebtn box_r"/><input type="submit" value="下一步" onclick="openStep2()" class="pop-closebtn box_r"/>
    </div>
    <!-- End .pop-bottom -->
</div>
<!-- End .pop-addphone1 -->

<div class="hide" id="addphone2" poptitle="添加接听话机">
    <div class="pop-setp pop-addphone2">
    <div class="pop-setpbg"></div>
      <p>接听话机号码：<input class="addphone2-text" type="text" value="15989497779" disabled="disabled"/></p>
      <p>请输入确认码：<input class="addphone2-text" type="text"/><input value="获取确认码" type="button"/></p>
    </div>
    <div class="pop-bottom">
      <input type="submit" value="取消" onclick="closePanel('#addphone2')" class="pop-closebtn box_r"/><input type="submit" value="下一步" onclick="openStep3()" class="pop-closebtn box_r"/><input type="submit" value="上一步" onclick="openStep1()" class="pop-closebtn box_r"/>
    </div>
    <!-- End .pop-bottom -->
</div>
<!-- End .pop-addphone1 -->


<div class="hide" id="addphone3" poptitle="添加接听话机">
	<div class="pop-addphone3 clearfix" ><img src="images/pop-msgok.gif" class="box_l icon-msgok"/>恭喜您，验证成功！</div>
	<div class="pop-bottom"><input type="submit" value="确定" onclick="closePanel('#addphone3')" class="pop-closebtn box_r"/></div>

</div>
<!-- End .pop-msgok -->


<div class="hide" poptitle="打电话给TA" id="callmsg">
    <div class="pop-callmsg text-center">
      <p class="bold blue1"><span class="succ">&nbsp;</span>呼叫请求成功！</p>
      <p>请注意，接听您的接听话机</p>
      <p>13632620138</p>
    </div>
    <!-- End .pop-box -->
    <!-- 加载状态
                <div class="pop-callmsg text-center">
                    <p class="font14 blue1 bold">正在呼叫...</p>
                    <p class="font14 blue1 bold">0755-26743485</p>
                    <p><img src="images/loading.gif" alt=""/></p>
                </div>-->
    <!-- End .pop-box -->
    <div class="pop-bottom">
      <input type="submit" value="关闭" class="pop-closebtn box_r" onclick="closePanel('#callmsg');"/>
    </div>
</div>
<!-- End #callmsg -->



<div class="hide" poptitle="拨打客服电话" id="callkefumsg">
    <div class="pop-callkefumsg text-center">
      <p class="bold blue1 font14">拨打客服电话</p>
      <p class="bold blue1 font14">4007168339</p>
    </div>
    <!-- End .pop-box -->
    <!-- 加载状态
                <div class="pop-callmsg text-center">
                    <p class="font14 blue1 bold">正在呼叫...</p>
                    <p class="font14 blue1 bold">0755-26743485</p>
                    <p><img src="images/loading.gif" alt=""/></p>
                </div>-->
    <!-- End .pop-box -->
    <div class="pop-bottom">
      <input type="submit" value="取消" class="pop-closebtn box_r" onclick="closePanel('#callkefumsg');"/><input type="submit" value="确定" class="pop-closebtn box_r"/>
    </div>
</div>
<!-- End #callmsg -->


</body>
</html>
